<template>
	<cl-page>
		<view class="search-page">
			<!-- 自定义状态栏 -->
			<cl-status-bar background-color="#fff" />

			<!-- 搜索栏 -->
			<view class="search-header">
				<cl-search 
					v-model="keyWord" 
					placeholder="商品名称|生产厂家|商品助记码|通用名" 
					@search="toSearch(keyWord)"
					:radius="32"
					background-color="#f5f5f5"
					height="72rpx"
				>
					<template #prepend>
						<cl-icon name="arrow-left" size="22px" @tap="router.back()" />
					</template>
				</cl-search>
			</view>

			<view class="page">
				<!-- 搜索历史 -->
				<view class="history" v-if="!keyWord">
					<view class="head">
						<text class="label">搜索历史</text>
						<cl-icon class-name="shop-icon-delete" :size="36" @tap="history.clear()" />
					</view>

					<view class="list">
						<text
							class="item"
							v-for="(item, index) in history.list"
							:key="index"
							@tap="toSearch(item)"
						>
							{{ item }}
						</text>

						<text class="item empty" v-if="isEmpty(history.list)">暂无搜索历史</text>
					</view>
				</view>

				<!-- 搜索发现 -->
				<view class="search" v-if="!keyWord">
					<view class="head">
						<text class="label">搜索发现</text>
					</view>

					<view class="list">
						<text
							class="item"
							v-for="(item, index) in recommend.list"
							:key="index"
							@tap="toSearch(item.name!)"
						>
							{{ item.name }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { storage, useCool } from "/@/cool";
import { isEmpty } from "lodash-es";
import { onReady } from "@dcloudio/uni-app";
import { useUi } from "/$/cool-ui";

const { router, service } = useCool();
const ui = useUi();

// 搜索关键字
const keyWord = ref("");

// 搜索历史
const history = reactive({
	list: (storage.get("search.history") || []) as string[],

	add() {
		if (!keyWord.value || history.list.includes(keyWord.value)) {
			return false;
		}

		history.list.push(keyWord.value);
		history.update();
	},

	clear() {
		ui.showConfirm({
			title: "提示",
			message: "确定要清空搜索历史吗？",
			callback(action) {
				if (action == "confirm") {
					history.list = [];
					history.update();
				}
			},
		});
	},

	update() {
		storage.set("search.history", history.list);
	},
});

// 推荐
const recommend = reactive({
	list: [] as Eps.GoodsSearchKeywordEntity[],

	get() {
		service.goods.searchKeyword.list().then((res) => {
			recommend.list = res;
		});
	},
});

// 搜索
function toSearch(val: string) {
	history.add();

	router.push({
		path: "/pages/goods/list",
		query: {
			keyWord: val,
		},
	});
}

onReady(() => {
	recommend.get();
});
</script>

<style lang="scss" scoped>
.search-page {
	background-color: #fff;
	min-height: 100vh;
}

.search-header {
	padding: 20rpx 24rpx;
	background-color: #fff;
}

.page {
	padding-top: 20rpx;

	.history,
	.search {
		padding: 0 24rpx;
		margin-bottom: 24rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;

			.label {
				display: inline-block;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			
			.item {
				display: inline-flex;
				align-items: center;
				height: 64rpx;
				padding: 0 32rpx;
				margin: 0 20rpx 20rpx 0;
				font-size: 26rpx;
				color: #666;
				border-radius: 32rpx;
				background-color: #f5f5f5;

				&.empty {
					color: #999;
				}
			}
		}
	}
}
</style>
